<template>
  <el-dialog
    v-model="visible"
    width="40%"
    :title="paramsProps.title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
  >
    <el-form
      ref="materialTypeFormRef"
      :model="paramsProps.row"
      :rules="rules"
      label-width="100px"
      size="default"
      :disabled="false"
      label-suffix=" :"
      @submit.enter.prevent="handleSubmit"
    >
      <el-form-item label="状态" prop="status" required>
        <el-switch
          v-model="paramsProps.row.status"
          :active-value="1017001"
          :inactive-value="1017002"
          active-text="启用"
          inactive-text="禁用"
          inline-prompt
          :active-action-icon="Check"
          :inactive-action-icon="Close"
        />
      </el-form-item>

      <el-form-item label="编码" prop="category_code">
        <el-input v-model="paramsProps.row.category_code" placeholder="请输入编码" disabled />
      </el-form-item>

      <el-form-item label="名称" prop="category_name">
        <el-input v-model="paramsProps.row.category_name" placeholder="请输入名称" clearable />
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="paramsProps.row.sort" :min="0" />
      </el-form-item>

      <template v-if="paramsProps.isAdd == false">
        <el-form-item label="创建时间" prop="create_at">
          <el-input disabled readonly v-model="paramsProps.row.create_at" />
        </el-form-item>
        <el-form-item label="更新时间" prop="updata_at">
          <el-input disabled readonly v-model="paramsProps.row.updata_at" />
        </el-form-item>
        <el-form-item label="创建人" prop="create_username">
          <el-input disabled readonly v-model="paramsProps.row.create_username" />
        </el-form-item>
        <el-form-item label="更新人" prop="updata_username">
          <el-input disabled readonly v-model="paramsProps.row.updata_username" />
        </el-form-item>
      </template>
    </el-form>
    <template #footer>
      <el-button @click="visible = false"> 取消 </el-button>
      <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
defineOptions({
  name: 'materialTypeForm'
});
import { ref, nextTick } from 'vue';
import { useOptionsStore } from '@/stores/modules/options';
import { ElMessage } from 'element-plus';
import { Check, Close } from '@element-plus/icons-vue';
const optionsStore = useOptionsStore();

const visible = ref(false);

const rules = ref({
  category_name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  category_code: [{ required: true, message: '请输入编码', trigger: 'blur' }]
});

const paramsProps = ref({
  title: '',
  row: {},
  api: undefined,
  getTableList: undefined,
  isAdd: true
});
const materialTypeFormRef = ref();
const handleSubmit = () => {
  materialTypeFormRef.value.validate(async valid => {
    if (!valid) return;
    try {
      await paramsProps.value.api(paramsProps.value.row);
      ElMessage.success({ message: `${paramsProps.value.title}成功！` });
      paramsProps.value.getTableList();
      visible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};
const acceptParams = params => {
  paramsProps.value = params;
  visible.value = true;
};

defineExpose({
  acceptParams
});
</script>

<style lang="scss" scoped>
/* 可按需补充样式 */
</style>
